<template>
  <div class="mod-config">
    <el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
      <el-form-item label="楼层" prop="bedFloor">
        <el-select v-model="floor" @change="floorChange" placeholder="请选择楼层">
          <el-option v-for="item in floorNameList" :key="item.roomfloor" :label="item.roomfloor"
            :value="item.roomfloor">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <!-- <el-button @click="getDataList()">查询</el-button> -->
        <!-- <el-button v-if="isAuth('yyzx:bed:save')" type="primary" @click="addOrUpdateHandle()">新增</el-button>
        <el-button v-if="isAuth('yyzx:bed:delete')" type="danger" @click="deleteHandle()" :disabled="dataListSelections.length <= 0">批量删除</el-button> -->
      </el-form-item>
    </el-form>


    <div style="display: inline;margin: auto;">
      <div style="display:inline-block;margin-left:20px">
        <img :src="require(`@/assets/img/u137.png`)" />
        <span>总床数:{{ roomVo.zcw }}</span>
        <!-- <span>总床数:11</span> -->
      </div>

      <div style="display:inline-block;margin-left:20px">
        <img :src="require(`@/assets/img/u139.png`)" />
        <span>空闲:{{ roomVo.kx }}</span>
        <!-- <span>总床数:11</span> -->
      </div>

      <div style="display:inline-block;margin-left:20px">
        <img :src="require(`@/assets/img/u141.png`)" />
        <span>有人:{{ roomVo.yr }}</span>
        <!-- <span>总床数:11</span> -->
      </div>

      <div style="display:inline-block;margin-left:20px">
        <img :src="require(`@/assets/img/u143.png`)" />
        <span>外出:{{ roomVo.wc }}</span>
        <!-- <span>总床数:11</span> -->
      </div>
    </div>
    <br />
    <br />


    <table width="95%" border="1px solid #3c3c3c" style="border-collapse:collapse">
      <tr class="thead">
        <th v-for="(room, index) in roomVo.roomList" :key="room.id" v-show="index < 9">
          {{ room.roomno }}
        </th>
      </tr>

      <tr class="tbody">
        <td v-for="(room, index) in roomVo.roomList" :key="room.id" v-show="index < 9">
          <div v-for="bed in room.bedList" :key="bed.id">
            {{ bed.bedno }}<br>
            <img :src="require(`@/assets/img/u139.png`)" v-if="bed.status == 1">
            <img :src="require(`@/assets/img/u141.png`)" v-if="bed.status == 2">
            <img :src="require(`@/assets/img/u143.png`)" v-if="bed.status == 3">
          </div>
        </td>
      </tr>

      <tr class="thead">
        <th v-for="(room, index) in roomVo.roomList" :key="room.id" v-show="index >= 9">
          {{ room.roomno }}
        </th>
      </tr>

      <tr class="tbody">
        <td v-for="(room, index) in roomVo.roomList" :key="room.id" v-show="index >= 9">
          <div v-for="bed in room.bedList" :key="bed.id">
            {{ bed.bedno }}<br>
            <img :src="require(`@/assets/img/u139.png`)" v-if="bed.status == 1">
            <img :src="require(`@/assets/img/u141.png`)" v-if="bed.status == 2">
            <img :src="require(`@/assets/img/u143.png`)" v-if="bed.status == 3">
          </div>
        </td>
      </tr>

    </table>

  </div>
</template>

<script>
import AddOrUpdate from './bed-add-or-update'
export default {
  data() {
    return {
      dataForm: {
        key: ''
      },
      floor:'一楼',
      roomVo:{},
      dataListLoading: false,
      addOrUpdateVisible: false,
      floorNameList:[]
    }
  },
  components: {
    AddOrUpdate
  },
  activated() {
    this.getDataList()
  },
  created(){
    this.getFloorName();
    this.getRoomListAndBedListByFloorName('一楼');
  },
  methods: {
    // 获取数据列表
    // getDataList() {
    //   this.dataListLoading = true
    //   this.$http({
    //     url: this.$http.adornUrl('/yyzx/bed/list'),
    //     method: 'get',
    //     params: this.$http.adornParams({
    //       'page': this.pageIndex,
    //       'limit': this.pageSize,
    //       'key': this.dataForm.key
    //     })
    //   }).then(({ data }) => {
    //     if (data && data.code === 0) {
    //       this.dataList = data.page.list
    //       this.totalPage = data.page.totalCount
    //     } else {
    //       this.dataList = []
    //       this.totalPage = 0
    //     }
    //     this.dataListLoading = false
    //   })
    // },
    floorChange(val){
      this.getRoomListAndBedListByFloorName(val);
    },
    getRoomListAndBedListByFloorName(val){
      //请求后台
      this.$http({
        url: this.$http.adornUrl(`/room/room/getRoomListAndBedListByFloorName`),
        method: 'get',
        params: this.$http.adornParams({
          floorName : val
        })
      }).then(({ data }) => {
        if (data && data.code === 0) {
          this.roomVo = data.roomVo;
          console.log(this.roomVo);
        }
      })
    },
    //获取楼层列表
    getFloorName() {
      this.$http({
        url: this.$http.adornUrl(`/room/room/floorNameList`),
        method: 'get',
        params: this.$http.adornParams()
      }).then(({ data }) => {
        if (data && data.code === 0) {
          this.floorNameList = data.floorNameList;
          console.log(this.floorNameList);
        }
      })
    },
    },

  }
</script>

<style lang="scss" scoped>
  table .thead{
    background-color: #0168b7;
    color: white;
    height: 40px;
  }
  table .tbody{
    text-align: center;
    height: 150px;
  }
</style>

